<template>
    <div class="container">
        <!-- 字体颜色清除 -->
        <div class="folderList">
            <div class="folder flexCCC" v-for="item in folderList" :key="item.id"
                @click="getFolderDetail(item.folderName)">
                <SvgIcon :src="'/icons/folder.svg'" size="100px" color="#ffca28"></SvgIcon>
                <div class="folderName">
                    {{ item.folderName }}
                </div>
            </div>
            <!-- 新建文件夹 -->
            <div @click="addFolderDialog" class="folder flexCCC">
                <SvgIcon :src="'/icons/addFolder.svg'" size="100px" color="#eeeeee"></SvgIcon>
                <div class="folderName">
                    新建文件夹
                </div>
            </div>
        </div>
        <!-- 标签管理 -->
        <div class="labelManage">
            <el-divider content-position="left">图表类型标签</el-divider>
            <div class="labelList">
                <span v-for="item in labelData" class="labelitem">
                    {{ item.label_name }}
                    <div class="closeIcon" @click="deleteLabel(item.label_id)">
                        <SvgIcon :src="'/icons/close.svg'" size="12px"></SvgIcon>
                    </div>
                </span>
                <span class="labelitem" @click="addLabelForm">添加标签
                    <SvgIcon :src="'/icons/add.svg'" size="17px"></SvgIcon>
                </span>
            </div>
        </div>
        <!-- 显示操作及文件夹抽屉 -->
        <el-drawer v-model="showFolderDetailDrawer" direction="btt" resizable :close-on-click-modal="false" size="70%">
            <template #header>
                <div class="flexCC">
                    <div style="flex: 1;">{{ activeName }}</div>
                    <el-button type="primary" @click="handleImage">提取文件夹内PDF图片</el-button>
                    <el-button type="Danger" @click="deleteFolderAxios">删除文件夹</el-button>
                </div>
            </template>
            <!-- 图表 -->
            <div class="TableListCenter">
                <el-table :data="tableFilesData" border style="width: 100%">
                    <el-table-column prop="filename" label="文件夹名称" />
                    <el-table-column prop="created_at" label="上传时间" width="280" />
                </el-table>
                <el-pagination v-model:current-page="tableFilesDataPagination.page"
                    v-model:page-size="tableFilesDataPagination.pageSize" :page-sizes="[10, 20, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper" :total="tableFilesDataPagination.total"
                    @size-change="getFolderListAxios" @current-change="getFolderListAxios" />
            </div>
        </el-drawer>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { getFolderList, createFolder, deleteFolder, getFileList, handlePdfToImage } from '@/api/upload'
import { getLabelList, addLabel,deleteLabel } from '@/api/label'

// import { ElMessage } from 'element-plus/es/components/index.js';
const router = useRouter();
const folderList = ref([]);
// 获取文件夹（期刊）列表
const initFolderList = async () => {
    const res = await getFolderList();
    if (res.code == 1) {
        folderList.value = res.data;
    } else {
        ElMessage({
            message: res.msg,
            type: 'error',
        })
    }
}
/** 新建文件夹 */
const addFolderDialog = () => {
    ElMessageBox.prompt('请输入您要创建的文件夹名称', '新建文件夹(期刊)', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // 禁止特殊符号
        inputPattern: /^[a-zA-Z0-9\u4e00-\u9fa5]+$/,
        inputErrorMessage: '仅支持中文、英文、数字',
    })
        .then(({ value }) => {
            createFolder(value).then(res => {
                if (res.code == 1) {
                    ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                    initFolderList();
                } else {
                    ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消操作',
            })
        })
}
const activeName = ref('')// 当前选中的期刊名称
const showFolderDetailDrawer = ref(false) // 显示文件夹详情抽屉
const tableFilesData = ref([]) // 期刊内子文件表格数据
// 表格分页信息
const tableFilesDataPagination = ref({
    page: 1,
    pageSize: 20,
    total: 0,
})
// 获取文件夹内文件列表
const getFolderListAxios = () => {
    // 发送获取请求
    const params = {
        folderName: activeName.value,
        page: tableFilesDataPagination.value.page,
        pageSize: tableFilesDataPagination.value.pageSize
    }
    getFileList(params).then(res => {
        console.log(res);
        if (res.code == 1) {
            tableFilesData.value = res.data.files;
            tableFilesDataPagination.value.total = res.data.pagination.total;
        } else {
            ElMessage({
                message: res.msg,
                type: 'error',
            })
        }
    })
}
/** 获取文件夹详情 */
const getFolderDetail = (folderName) => {
    activeName.value = folderName;
    getFolderListAxios();
    showFolderDetailDrawer.value = true;
}
/** 处理图片 */
const handleImage = () => {
    // activeName
    handlePdfToImage(activeName.value).then(res => {
        if (res.code == 1) {
            ElMessage({
                message: res.msg,
                type: 'success',
            })
        } else {
            ElMessage({
                message: res.msg,
                type: 'error',
            })
        }
    })
}

/** 删除文件夹 */
const deleteFolderAxios = () => {
    ElMessageBox.confirm(
        '此操作会导致【' + activeName.value + '】期刊内的所有资源无法访问, 是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deleteFolder(activeName.value).then(res => {
                if (res.code == 1) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功!',
                    })
                    initFolderList();
                    showFolderDetailDrawer.value = false;
                } else {
                    ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            })
        })
}
const labelData = ref([]) // 标签列表
/** 获取标签列表 */
const getTagList = () => {
    getLabelList().then(res => {
        if (res.code == 1) {
            labelData.value = res.data;
        } else {
            ElMessage({
                message: res.msg,
                type: 'error',
            })
        }
    })
}
// 添加标签
const addLabelForm = () => {
    ElMessageBox.prompt('请输入您要添加的标签，请确保标签唯一，请勿重复添加', '添加图表类型标签', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
    })
        .then(({ value }) => {
            addLabel(value).then(res => {
                if (res.code == 1) {
                    ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                    getTagList()
                } else {
                    ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Input canceled',
            })
        })
}
onMounted(() => {
    initFolderList();
    getTagList()
})

</script>
<style scoped lang='scss'>
.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.folderList {
    display: flex;
    flex-wrap: wrap;
    max-height: 50%;
    overflow: auto;

    .folder {
        width: 100px;
        cursor: pointer;

        .folderName {
            // 单行显示超出显示省略号
            text-align: center;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
        }
    }
}

// 标签模块
.labelManage {
    height: 50%;
    border-top: 1px solid #ccc;
    padding: 10px;
    .labelList{
        display: flex;
        .labelitem {
            border: 1px solid #ccc;
            padding: 5px 10px;
            margin: 5px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 13px;
            color: #666;
            display: flex;
            align-items: center;
            .closeIcon{
                margin-left: 5px;
                cursor: pointer;
                height: 20px;
                width: 20px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                &:hover{
                    background: #7bbdff;
                    border-radius: 50%;
                    color: #fff;
                }
            }
        }
    }
}


// 底部抽屉内容
.TableListCenter {
    height: 100%;

    .el-table {
        height: calc(100% - 60px);
    }

    .el-pagination {
        margin-left: auto;
        margin-top: 10px;
        display: flex;
        justify-content: end;
    }
}

// 样式穿透
:v-deep(.el-drawer__header) {
    margin-bottom: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
}
</style>